<!-- 放箱员管理 -->
<template>
  <div class="boxer-management">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="20">
        <el-form :model="formData" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="名称" label-width="40px">
            <el-input v-model="formData.nickName" @keyup.enter.native="inquire"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="80px">
            <el-select  v-model="formData.state" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="冻结" value="0"></el-option>
              <el-option label="激活" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <div style="display: flex; justify-content: flex-end; height: 29px;">
          <el-button type="success" size="mini" @click="newSalesman">新增</el-button>
          <el-button type="primary" size="mini" @click="inquire">查询</el-button>
          <el-button size="mini" @click="empty">清空</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      :data="tableData"
      border
      style="width: 100%; overflow-x: auto;">
      <el-table-column
        align="center"
        label="姓名">
        <template slot-scope="scope">
          {{scope.row.fullName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="性别">
        <template slot-scope="scope">
          {{scope.row.sex | salespersonGender}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="手机号码">
        <template slot-scope="scope">
          {{scope.row.mobile}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="电话号码">
        <template slot-scope="scope">
          {{scope.row.phone1}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="QQ">
        <template slot-scope="scope">
          {{scope.row.qq}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="登录用户名">
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="部门">
        <template slot-scope="scope">
          {{scope.row.jobName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
          {{scope.row.state | salespersonStatus}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="210">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="updateStatus(scope.row, 0)" v-if="scope.row.state==='激活'">冻结</el-button>
            <el-button
            size="mini"
            type="success"
            @click="updateStatus(scope.row, 1)" v-if="scope.row.state==='冻结'">激活</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="isDele(scope.row.salesmanId)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <div class="salesman-man-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 15, 20]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <new-boxer-dialog :jobList="jobList"></new-boxer-dialog>
    <edit-boxer-dialog :myData="rowData" :jobList="jobList" ref="hangeStatus"></edit-boxer-dialog>
  </div>
</template>

<script>
import NewBoxerDialog from './dialog/NewBoxerDialog.vue'
import EditBoxerDialog from './dialog/EditBoxerDialog.vue'
import { getSalesman, updState, getJob, delSalesman } from './api/userman'
export default {
  components: {
    NewBoxerDialog,
    EditBoxerDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        state: '',
        userName: ''
      },
      rowData: '',
      loading: true,
      pageNo: 1,
      number: 10,
      jobList: [],
      total: 0
    }
  },
  async mounted () {
    this.getTabeDate(1, 10)
    this.getJobList(1, 1000)
  },
  methods: {
    newSalesman () {
      this.getJobList(1, 1000)
      this.$store.commit('show_new_boxer_dialog')
    },
    // 获取业务员列表
    async getTabeDate (pg, nb) {
      this.loading = true
      const res = await getSalesman({
        userName: this.formData.nickName,
        state: this.formData.state,
        userType: 9,
        page: pg,
        num: nb
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.count
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 获取部门列表
    async getJobList (pg, nb) {
      const res = await getJob({
        page: pg,
        num: nb
      })
      if (res.status === 200) {
        this.jobList = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    isDele (id) {
      this.$confirm(' 是否删除放箱员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delSalesman(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        return false
      })
    },
    // 删除业务员
    async delSalesman (id) {
      const res = await delSalesman({
        salesmanId: id
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getTabeDate(this.pageNo, this.number)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 更新业务员状态
    async updateStatus (row, st) {
      const res = await updState({
        salesmanId: row.salesmanId,
        state: st
      })
      if (res.status === 200) {
        if (st === 0) {
          row.state = '冻结'
          this.$notify({
            title: '成功',
            message: '冻结成功！',
            type: 'success'
          })
        }
        if (st === 1) {
          row.state = '激活'
          this.$notify({
            title: '成功',
            message: '激活成功！',
            type: 'success'
          })
        }
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    handleEdit (index, row) {
      this.getJobList(1, 1000)
      this.$store.commit('show_edit_boxer_dialog')
      this.rowData = JSON.stringify(row)
      // console.log(index, row)
      // console.log(this.rowData)
    },
    // 查询
    inquire () {
      this.getTabeDate(1, 10)
    },
    // 清空
    empty () {
      this.formData = {}
    },
    handleCurrentChange (val) {
      this.getTabeDate(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getTabeDate(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style lang="less">
.boxer-management {
  .salesman-man-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
}
</style>
